import {ScrollView, View, Text, Image, Button} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {AtActionSheet, AtActionSheetItem, AtIcon, AtCountdown} from 'taro-ui';
import 'taro-ui/dist/style/components/action-sheet.scss';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import Tab from './components/tab';
import IntegralBg from './img/integral-goods-bg.png';
import goldImg from '@/assets/image/my/gold.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      windowHeight: 0,
      count: 0,
      isDoing: true,
    };
  }

  componentDidMount() {
    let that = this;
    that.getNavHeight();
    // that.setState(
    //   {
    //     count: 15,
    //     isDoing: true,
    //   },
    //   () => {
    //     let t = setInterval(() => {
    //       if (that.state.count === 0) {
    //         clearInterval(t);
    //         that.setState({
    //           isDoing: false,
    //           count: 0,
    //         });
    //       } else {
    //         that.setState({count: that.state.count - 1});
    //       }
    //     }, 1000);
    //   },
    // );
  }

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  getNavHeight() {
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    var sysinfo = Taro.getSystemInfoSync();
    let windowHeight = sysinfo.windowHeight;
    let statusBarHeight = sysinfo.statusBarHeight;
    let menuBottonHeight = menuButtonObject.height;
    let menuBottonTop = menuButtonObject.top;
    let navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2;
    this.setState({
      navBarHeight,
      windowHeight,
    });
  }

  render() {
    let {navBarHeight, count, isDoing} = this.state;
    let {
      main: {showMode},
      actions: {action},
    } = this.props;
    return (
      <View className="packageCommunity">
        <View className="communitySearch" style={{height: navBarHeight}}>
          <View className="titleBox">
            <AtIcon
              onClick={() => {
                Taro.navigateBack();
              }}
              customStyle={{zIndex: 2}}
              value="chevron-left"
              size="30"
              color="#000"
            ></AtIcon>
            <View
              style={{
                fontSize: '36rpx',
                fontWeight: 500,
                color: '#333333',
                margin: '0 auto',
                zIndex: 2,
                transform: 'translateX(-36%)',
              }}
            >
              积分兑换
            </View>
          </View>
        </View>
        <Image src={IntegralBg} className="IntegralBg" />
        <View className="flexEnd">
          <View
            className="exchangeBox"
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/package-A/customer/user/points-order-list/index',
              });
            }}
          >
            <Text className="text">兑换记录</Text>
            <AtIcon customStyle={{zIndex: 2}} value="chevron-right" size="16" color="#DF9609"></AtIcon>
          </View>
        </View>
        <Tab />
        {/* <View className="browseBox">
          <View className="textBox">
            {isDoing ? (
              <>
                <Text className="text">逛逛会场</Text>
                <Text className="text">浏览{count}秒</Text>
              </>
            ) : (
              <>
                <Text className="text">任务完成</Text>
                <Text className="text">点击返回</Text>
              </>
            )}
          </View>
        </View> */}
      </View>
    );
  }
}
